import React, {Component} from 'react';

require('./css/frame.css');

export default class P26 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: 0,
      subindex:[1, 0],
    };
  }

  onClick(i) {
    let flag = [0, 0, 0, 0];
    flag[i] = 1;
    this.setState({
      flag,
      index: i
    });
  }

  onSlider(i) {
    let subindex = [0, 0];
    subindex[i] = 1;
    this.setState({
      subindex
    });
  }


  render() {
    const {index, subindex} = this.state;
    return (
      <div id="page">
        <div className="content" id="box26">
          <h4 className="title">信息娱乐系统</h4>
          <div className='infodiv'>请点击模块，详细了解信息娱乐系统的配置及功能特点。</div>

          <img className={index === 0 ? 'box26btn_on' : 'box26btn'}
               onClick={this.onClick.bind(this, 0)}
               src={require('./img/26_03.jpg')} style={{top: 100}}/>
          <img className={index === 1 ? 'box26btn_on' : 'box26btn'}
               onClick={this.onClick.bind(this, 1)}
               src={require('./img/26_05.jpg')} style={{top: 190}}/>
          <img className={index === 2 ? 'box26btn_on' : 'box26btn'}
               onClick={this.onClick.bind(this, 2)}
               src={require('./img/26_06.jpg')} style={{top: 295}}/>
          <img className={index === 3 ? 'box26btn_on' : 'box26btn'}
               onClick={this.onClick.bind(this, 3)}
               src={require('./img/26_07.jpg')} style={{top: 390}}/>


          {index === 0 && <div className='box26Cont' id='box260'>
            <p className='box26bold'>MIB2-G Standard PLUS 收音机</p>
            <p className='box26bold'>特点</p>
            <p style={{marginBottom: 10}}>6.5寸电容屏，显示界面更加完整，清晰，为用户带来更轻盈的触摸体验。
              原装BAP功能可实现与整车空调和仪表信息的联络。</p>
            <p className='box26bold'>功能</p>
            <ul>
              <li>集成USB/SD接口，支持多种便携式音频设备。</li>
              <li>支持MP3/WMA9等多种音频格式。</li>
              <li>支持FM/AM/RDS电台信息显示。</li>
              <li>支持Apple carplay/Baidu carlife/MirrorLink，实现人机交互。</li>
            </ul>

          </div>}

          {index === 1 && <div className='box26Cont' id='box261'>
            <p className='box26bold'>Entry Navi导航</p>
            <div>
              <p className='box26bold'>基本功能</p>
              <ul>
                <li>FM/AM （双Tuner）</li>
                <li>1 USB</li>
              </ul>
            </div>

            <div>
              <p className='box26bold'>导航</p>
              <ul>
                <li>本地化的导航引擎</li>
                <li>2.5D地图</li>
                <li> 高度识别 & 惯导</li>
              </ul>
            </div>
            <div>
              <p className='box26bold'>连接</p>
              <ul>
                <li>
                  内置蓝牙
                </li>
                <li>开放应用程序编程接口
                  (包括车辆控制功能及导航)
                </li>
                <li>手机互联</li>
                <li>内置WiFi</li>
              </ul>
            </div>
            <div>
              <p className='box26bold'>在线服务</p>
              <ul>
                <li>在线实时交通信息显示</li>
                <li> 在线地图升级</li>
                <li>在线天气/新闻/广播/音乐（选装）</li>
              </ul>
            </div>
          </div>
          }

          {index === 2 && <div className='box26Cont' id='box262'>
            <p className='box26bold'>MIB2 Standard Navi导航（Discover Media）</p>
            <img src={require('./img/26_5.jpg')} style={{display: 'block'}}/>
            <div>
              <p className='box26bold'>选装（依市场不同而定）</p>
              <ul>
                <li>倒车摄像头</li>
                <li>舒适电话接口</li>
                <li>USB 多媒体接口，支持 iPhone/iPod</li>
                <li>DAB+ 接收</li>
                <li>“基础版”语音控制系统</li>
                <li>车联网“App-Connect”</li>
              </ul>
            </div>
            <div>
              <p className='box26bold'>特点<br></br>扩展为 Composition Media：</p>
              <ul>
                <li> SD 卡 (2x)</li>
                <li>导航功能
                  - One Shot 目的地输入<br></br>
                  - 个人 POI<br></br>
                  - 2D/3D 地图显示<br></br>
                  - 不同国家特有的插图选项
                </li>
              </ul>
            </div>

          </div>}


          {index === 3 && <div className='box26Cont' id='box263'>
            <p className='box26bold'>MIB High导航（Discover pro）</p>

            {subindex[0] === 1 && <div className='box263sub' id='box263sub1'>
              <div>
                <p className='box26bold'>亮点：</p>
                <ul>
                  <li>玻璃覆盖的 9.2" 触摸屏，TFT 彩色显示屏（1280x640，155dpi）</li>
                  <li>DVD 驱动器，SD 卡 (2x)</li>
                  <li>USB 多媒体接口，AUX-IN</li>
                  <li>蓝牙移动电话接口 (HFP, PBAP, A2DP, AVRCP, MAP)</li>
                  <li>车联网，包括 App-Connect 和 Media Control</li>
                  <li>导航功能</li>
                </ul>
              </div>
              <div>
                <p className='box26bold'>选装:</p>
                <ul>
                  <li>（依市场不同而定）</li>
                  <li>倒车摄像头</li>
                  <li>舒适系统电话接口商务电话接口（包括 SIM 读卡器）</li>
                  <li>TV 接收 / DAB+</li>
                  <li><img src={require('./img/26_6.jpg')}/></li>
                </ul>
              </div>
            </div>}

            {subindex[1] === 1 && <div className='box263sub' id='box263sub2'>
              <div>
                <p className='box26bold'>具有接近识别功能的触摸屏</p>
                <ul>
                  <li>手势控制：用手做出扫动手势可以将菜单项水平向左或向右移动。</li>
                  <li>手势控制可以在各种菜单中使用。</li>
                  <li>驾驶员可以在主菜单，更换电台，在播放列表和图片浏览器中前进或后退，并浏览音乐文件夹。</li>
                  <li>在可以手势控制的菜单中会出现一个可视的图标（手形）。</li>
                  <li>手势操作成功后会有声音效果。</li>
                  <li><img src={require('./img/26_7.jpg')}/></li>
                </ul>
              </div>
            </div>}


            <div id="csld" className="sldcir" style={{left: 275,bottom:-50}}>
              {subindex.map((item, i) => {
                let sr = (item === 1 ? 'son' : 'soff');
                return (
                  <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
              })}
            </div>
          </div>
          }

        </div>
      </div>
    );
  }
}


